<template>
  <div class="member-list">
    <!--    订单管理-收入明细-->
    <BasicTable @register="registerTable">
      <template v-if="false" #toolbar>
        <Button :type="'primary'" @click="handleExport">导出EXCEL</Button>
      </template>
      <template #formBottomSlot>
        <Card style="margin: 16px 0; border-radius: 0">
          <div class="statistics-info flex-row-center-space">
            <div v-for="item in abstractList" :key="item.key">
              {{ item.label }}：{{ abstractInfo[item.key] || 0 }}</div
            >
          </div>
        </Card>
      </template>
    </BasicTable>
  </div>
</template>

<script setup lang="ts">
  import { onActivated, ref } from 'vue';
  import mcApi from 'mc-c2b2m-operator-api';
  import { Card, Button } from 'ant-design-vue';
  import { formatToDateTime } from '@/utils/dateUtil';
  import { BasicTable, useTable } from '@/components/Table';
  import { useTableAction } from '@/hooks/web/useTableAction';
  import { abstractList, tableColumns, tableFormSchema } from './data';

  const { OrderModule } = mcApi;
  const { IncomeDetailApi } = OrderModule;
  const { handleFetchDateParams } = useTableAction();

  const abstractInfo = ref<any>({});

  const [registerTable, { reload }] = useTable({
    striped: false,
    bordered: false,
    canResize: false,
    immediate: false,
    useSearchForm: true,
    columns: tableColumns,
    showIndexColumn: false,
    showTableSetting: false,
    api: IncomeDetailApi.getSalesOrderFlowPage,
    formConfig: {
      labelWidth: 120,
      schemas: tableFormSchema,
    },
    beforeFetch: (arg) => {
      arg.desc = 'aa.paidTime';
      handleFetchDateParams(arg);
      IncomeDetailApi.collectSalesOrderFlowAbstract(arg).then((res: any) => {
        abstractInfo.value = res || {};
      });
    },
  });
  onActivated(() => reload());

  function handleExport() {}
</script>
<script lang="ts">
  export default {
    name: 'IncomeDetail',
  };
</script>

<style scoped lang="scss">
  :deep(.ant-table-thead > tr > th) {
    background: #fff;
  }
  .statistics-info {
    width: 60%;
    font-size: 16px;
    font-weight: bold;
  }
</style>
